<template>
  <div class="fd-nav-content">
    <section class="dingflow-design">
      <div class="zoom">
        <div
          class="zoom-out"
          :class="nowVal == 50 && 'disabled'"
          @click="zoomSize(1)"
        ></div>
        <span>{{ nowVal }}%</span>
        <div
          class="zoom-in"
          :class="nowVal == 300 && 'disabled'"
          @click="zoomSize(2)"
        ></div>
      </div>
      <div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
        <TreeItem
          v-model:nodeConfig="props.nodeConfig"
          v-model:flowPermission="props.flowPermission"
        />
        <div class="end-node">
          <div class="end-node-circle"></div>
          <div class="end-node-text">流程结束</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, onMounted } from 'vue';
  import TreeItem from './treeItem.vue';

  let props = defineProps({
    nodeConfig: {
      type: Object,
      default: () => ({
        type: 1,
        templateId: 0,
        name: '合同审批',
        userStaffId: 0,
        userStaffName: '',
        description: '这里是说明',
        nodeConfig: {
          type: 0,
          name: '发起人',
          sort: 0,
          auditType: 0,
          approverType: 0,
          approverTypeId: 0,
          nodeUserList: [],
          approverIsEmpty: 0,
          conditionNodes: [],
          childNode: null,
        },
        status: 1,
        reCommit: 1,
        updatedUserStaffId: 0,
        updatedUserStaffName: '',
      }),
    },
    flowPermission: {
      type: Object,
      default: () => [] || {},
    },
  });

  let nowVal = ref(100);
  const zoomSize = (type: number) => {
    if (type === 1 && nowVal.value !== 50) {
      nowVal.value -= 10;
    } else if (nowVal.value !== 300) {
      nowVal.value += 10;
    }
  };
</script>

<style lang="less">
  @import url('@/components/approval/css/workflow.less');
</style>
